<style lang="less" scoped>
    .container{
        margin-top: 3rem;
    }
    .drawer-left{
        margin-top: 3rem;
        position: absolute;
        background-color: rgba(255,255,255,1);
        left: 0px;
        top:0px;
        width: 100%;
        height: 100%;
        animation: 0.4s drawer-animation 1;
        z-index: 10;
        .btn-device-list{
            margin-top: 0.4rem;
        }
    }
    .switch-main-body{
        .statistic-grid{
            position: relative;
            &:before{
                content: " ";
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                height: 1px;
                border-top: 1px solid #D9D9D9;
                color: #D9D9D9;
                transform-origin: 0 0;
                transform: scaleY(0.5);
            }
            &:after{
                content: " ";
                position: absolute;
                left: 0;
                top: 0;
                width: 1px;
                bottom: 0;
                border-left: 1px solid #D9D9D9;
                color: #D9D9D9;
                transform-origin: 0 0;
                transform: scaleX(0.5);
            }
            .grid-item{
                position: relative;
                float:  left;
                width: 33.3%;
                text-align: center;
                padding: 1rem 0.5rem;
                box-sizing:border-box;
                .grid-content{
                    display: flex;
                    flex-direction: column;
                    .light-number{
                        font-size: 1.5rem;
                    }
                }
                &:before{
                    content: " ";
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 1px;
                    bottom: 0;
                    border-right: 1px solid #D9D9D9;
                    color: #D9D9D9;
                    transform-origin: 100% 0;
                    transform: scaleX(0.5);
                }
                &:after{
                    content: " ";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    height: 1px;
                    border-bottom: 1px solid #D9D9D9;
                    color: #D9D9D9;
                    transform-origin: 0 100%;
                    transform: scaleY(0.5);
                }
            }

        }
        .switch-list{

        }
    }
    @-webkit-keyframes drawer-animation{
        0%{ transform: translateX(-100%)}
        100%{ transform: translateX(0)}
    }
</style>
<template>
    <div class="container">
        <x-header style="width:100%;position:fixed;left:0;top:0;z-index:100;" :right-options="{showMore: true}" @on-click-more="showMenus = true">
            <span>开关设备</span>
            <x-icon slot="overwrite-left" @click="showDrawer" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
        </x-header>
        <div >
                <div v-show="drawerShow" class="drawer-left fadeOut">
                    <group title="选择">
                        <selector title="区域"  :options="areaList" @on-change="areaChange" v-model="dataForm.areaId"></selector>
                        <selector title="建筑" :options="buildList" @on-change="buildChange"   v-model="dataForm.buildId"></selector>
                        <selector title="集中器"  :options="conList" @on-change="conChange"  v-model="dataForm.concentratorId"></selector>
                        <selector title="节点"  :options="nodeList" @on-change="nodeChange"  v-model="dataForm.nodeId"></selector>
                    </group>
                    <x-button class="btn-device-list" @click.native="getLight" type="primary">提交</x-button>
                    <x-button class="btn-device-list" @click.native="cancelSelect" type="primary">取消</x-button>
                    <x-button class="btn-device-list" @click.native="allOpen" type="primary">全开</x-button>
                    <x-button class="btn-device-list" @click.native="allClose" type="primary">全关</x-button>
                </div>

            <div class="switch-main-body">
                <div class="statistic-grid">
                    <div class="grid-item">
                        <div class="grid-content">
                            <span class="light-number">{{switchStatistics.all}}</span>
                            <span>全部</span>
                        </div>
                    </div>
                    <div class="grid-item">
                        <div class="grid-content">
                            <span class="light-number">{{switchStatistics.open}}</span>
                            <span>开灯</span>
                        </div>
                    </div>
                    <div class="grid-item">
                        <div class="grid-content">
                            <span class="light-number">{{switchStatistics.online}}</span>
                            <span>在线</span>
                        </div>
                    </div>
                </div>
                <search @on-submit="submitSearch" :auto-fixed="false" v-model="dataForm.search"  @on-cancel="cancelSearch"></search>
                <div class="switch-list">
                    <switch-node v-for="item in switchList" :key="item.circuit_id" @updateData="getLight" :switchInfo="item"></switch-node>
                </div>
            </div>
        </div>
        <actionsheet :menus="menuList" v-model="showMenus" show-cancel @on-click-menu="menuChange"></actionsheet>
    </div>
</template>


<script>
    import SwitchNode from './children/switch-node.vue'
    import { Search } from 'vux'
    import { Actionsheet } from 'vux'
    export default{
        data(){
            return {
                drawerShow:false,
                placeholder:'请选择',
                dataForm:{
                    areaId:0,
                    buildId:0,
                    concentratorId:0,
                    nodeId:0,
                    circuitId:0,
                    search:'',
                    page:1,
                    row:200
                },
                areaList:[],
                buildList:[],
                conList:[],
                nodeList:[],
                circuitList:[],
                switchList:[],
                switchStatistics:{},
                showMenus:false,
                menuList:{
                    refresh:'刷新',
                    scene:'场景'
                },
                refreshValue:{}
            }
        },
        components: {
            SwitchNode,Search,Actionsheet
        },
        computed: {},
        methods: {
            cancelSelect(){
                this.drawerShow = false;
            },
            allOpen(){
                this.dataForm.en = 1;
                this.$store.dispatch('BatchSwitch', this.dataForm).then((data) => {
                    if (data.status == 1) {
                        this.$vux.toast.text('请等待一段时间后手动刷新', 'bottom');
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }

                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            allClose(){
                this.dataForm.en = 0;
                this.$store.dispatch('BatchSwitch', this.dataForm).then((data) => {
                    if (data.status == 1) {
                        this.$vux.toast.text('请等待一段时间后手动刷新', 'bottom');
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            menuChange(menuKey, menuItem){
                switch (menuKey){
                    case 'refresh':
                        this.getLight();
                        this.getArea();
                        break;
                    case 'scene':
                        this.$router.push({path:'/scene'});
                        break;
                    default:
                        break;
                }
            },
            submitSearch(val){
                this.dataForm.search = val.trim();
                this.getLight();
                this.getSwitchStatistics();
            },
            cancelSearch(){
                this.dataForm.search = '';
                this.getLight();
            },
            getLight(){
                this.$store.dispatch('GetSwitchList', this.dataForm).then((data) => {
                    if (data.status == 1) {
                        this.switchList = data.result.value;
                        console.log(this.switchList);
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }

                }).catch((err) => {
                    this.$vux.loading.hide()
                });
                this.drawerShow = false;
            },
            showDrawer(){
                this.drawerShow = !this.drawerShow;
            },
            getSwitchStatistics(){
                this.$store.dispatch('GetSwitchStatistics').then((data) => {
                    if (data.status == 1) {
                        this.switchStatistics = data.result;
                    }else {
                        this.$vux.toast.text('失败', 'bottom');
                    }

                }).catch((err) => {

                });
            },
            timerRefresh(){
                this.refreshValue = setInterval(()=>{
                    this.getLight();
                },20000);
            },
            getArea(){
                let data = {
                    parentId:0,
                    deviceRange:0
                };
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let areas = [];
                    areas.push({
                        key:0,
                        value:'未指定'
                    })
                    if (data.status == 1) {
                        data.result.forEach(function (item,index) {
                            areas.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.areaList = areas;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }

                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            getBuild(){
                let data = {
                    parentId:this.dataForm.areaId,
                    deviceRange:1
                }
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let builds = [];

                    if (data.status == 1) {
                        builds.push({
                            key:0,
                            value:'未指定'
                        });
                        data.result.forEach(function (item,index) {
                            builds.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.buildList = builds;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            getCon(){
                let data = {
                    parentId:this.dataForm.buildId,
                    deviceRange:2
                }
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let cons = [];
                    if (data.status == 1) {
                        cons.push({
                            key:0,
                            value:'未指定'
                        });
                        data.result.forEach(function (item,index) {
                            cons.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.conList = cons;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            getNode(){
                let data = {
                    parentId:this.dataForm.concentratorId,
                    deviceRange:3
                }
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let nodes = [];
                    if (data.status == 1) {
                        nodes.push({
                            key:0,
                            value:'未指定'
                        });
                        data.result.forEach(function (item,index) {
                            nodes.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.nodeList = nodes;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            getCircuit(){
                let data = {
                    parentId:this.dataForm.nodeId,
                    deviceRange:4
                }
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let circuits = [];
                    if (data.status == 1) {
                        circuits.push({
                            key:0,
                            value:'未指定'
                        });
                        data.result.forEach(function (item,index) {
                            circuits.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.circuitList = circuits;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            areaChange(value){
                this.dataForm.areaId = value;
                this.getBuild();
            },
            buildChange(value){
                this.dataForm.buildId= value;
                this.getCon();
            },
            conChange(value){
                this.dataForm.concentratorId = value;
                this.getNode();
            },
            nodeChange(value){
                this.dataForm.nodeId=value;
                this.getCircuit();
            },


        },
        created: function () {
            this.getSwitchStatistics();
            this.getArea();
            this.timerRefresh();
        },
        beforeRouteLeave(to, from, next){
            window.clearInterval(this.refreshValue);
            next();
        }
    }
</script>
